<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 表单 </el-breadcrumb-item>
                <el-breadcrumb-item>基本表单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form :rules="rules" ref="form" :model="form" label-width="200px">
                    <!-- 展示标题 -->
                    <div style="text-align: center; font-size: 25px; height: 60px; color: rgb(64, 158, 255)">提交代理升级请求</div>
                    <!-- 展示框，展示当前代理等级 -->
                    <el-form-item label="当前代理等级">
                        <p v-if="form.levelid == 1" style="color: rgb(255 0 255); font-weight: 1000">一级代理</p>
                        <p v-else-if="form.levelid == 2" style="color: rgb(255 0 255); font-weight: 1000">二级代理</p>
                        <p v-else-if="form.levelid == 3" style="color: rgb(255 0 255); font-weight: 1000">三级代理</p>
                        <p v-else-if="form.levelid == 4" style="color: rgb(255 0 255); font-weight: 1000">普通会员</p>
                        <p v-else style="color: rgb(255 0 255); font-weight: 1000">非法访问</p>
                    </el-form-item>
                    <!-- 展示框，展示当前代理上级姓名 -->
                    <!-- 选择框：选择代理等级 -->
                    <el-form-item label="选择你的申请代理等级" prop="levelapply">
                        <el-select v-model="form.levelapply" placeholder="请选择">
                            <el-option label="一级代理" value="1" :disabled="item.levleOne"></el-option>
                            <el-option label="二级代理" value="2" :disabled="item.levleTwo"></el-option>
                            <el-option label="三级代理" value="3" :disabled="item.levleThree"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 展示框，展示升级代理后将会变为谁的下级代理，后台功能未完成 -->

                    <el-form-item label="代理申请描述" prop="describe">
                        <el-input type="textarea" rows="5" v-model="form.describe"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('form')">表单提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { fetchData, submitLevelApplicationform, selectMyMember } from '../../api/testIndex.js';

export default {
    name: 'baseform',
    data() {
        return {
            rules: {
                levelapply: [{ required: true, message: '请选择代理等级', trigger: 'change' }],
                describe: [
                    { required: true, message: '请填写描述', trigger: 'blur' },
                    { min: 10, message: '最少十个字符', trigger: 'blur' }
                ]
            },
            form: {
                levelapply: '',
                describe: '',
                levelid: ''
            },
            item: {
                levleOne: true,
                levleTwo: true,
                levleThree: true
            }
        };
    },
    //在创建页面调用获取数据的方法
    created() {
        this.getData();
    },

    methods: {
        //获取数据
        getData() {
            selectMyMember().then((res) => {
                this.form.levelid = res.levelid;
                if (res.levelid == 2) {
                    this.item.levleOne = false;
                } else if (res.levelid == 3) {
                    this.item.levleOne = false;
                    this.item.levleTwo = false;
                } else if (res.levelid == 4) {
                    this.item.levleOne = false;
                    this.item.levleThree = false;
                }
            });
        },

        onSubmit(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    alert('submit!');
                    console.log(this.form);
                    submitLevelApplicationform(this.form).then((res) => {
                        console.log(res);
                    });
                    this.$message.success('提交成功！');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
};
</script>